<script setup>
import {reqAttr} from '@/api/product/attr'
import {reqSpuImageList,reqHasSaleAttrValue,reqAddSku} from '@/api/product/spu'
import { ElMessage } from 'element-plus';
import {ref,reactive,nextTick} from 'vue'

let attrArr = ref([])  // 保存属性列表
let saleArr = ref([])  // 保存销售属性列表
let imgArr = ref([])  // 保存图片列表
let table = ref()  // 获取table组件实例
let skuParams = reactive({  // 收集数据
    category_id:'',  // 三级分类id
    spu_id:'',  // spuId
    trademark_id:'',  // SPU品牌id
    name:'',  // spu的名字
    price:'',  // 价格
    weight:'',  // 重量
    sku_desc:'',  // sku描述
    sku_category_attr:[  // sku的属性列表
        {}
    ],
    sku_sale_attr:[
        {}
    ],
    default_img:'',
})


let $emit = defineEmits(['changeScene'])  // 接收父组件传过来的事件
const cancel = ()=>{
    $emit('changeScene',{flag:0,params:''})  // 触发父组件传过来的事件
}

// 添加sku时，初始化数据
const initSkuData = (spu)=>{
    // 清空之前的数据
    Object.assign(skuParams,{
        name:'',
        price:'',
        weight:'',
        sku_desc:'',
    })
    // 收集数据
    skuParams.category_id=spu.category_id
    skuParams.spu_id=spu.id
    skuParams.trademark_id = spu.trademark_id
    // 获取平台属性
    reqAttr(spu.category_id).then(res=>{
        attrArr.value = res.data.data
    })
    // 获取销售属性
    reqHasSaleAttrValue(spu.id).then(res=>{
        saleArr.value = res.data.data
    })
    // 获取照片墙的数据
    reqSpuImageList(spu.id).then(res=>{
        imgArr.value = res.data.data
    })

}
// 编辑sku时，初始化数据
const editSkuInitData = (sku)=>{
    // Object.assign(skuParams,{
    //     id:sku.id,
    //     category_id: sku.category_id,  // 三级分类id
    //     spuId: sku.spu_id,  // spuId
    //     trademark_id:sku.trademark_id,  // SPU品牌id
    //     name: sku.name,  // spu的名字
    //     price:sku.price,  // 价格
    //     weight:sku.weight,  // 重量
    //     sku_desc:'',  // sku描述
    //     sku_category_attr:[  // sku的属性列表
    //         {
    //             attrId:'',
    //             valueId:'',
    //         }
    //     ],
    //     sku_sale_attr:[
    //         {
    //             saleAttrId:0,
    //             saleAttrValueId:0
    //         }
    //     ],
    //     default_img:'',
    // })

    // 收集父组件传过来的数据
    Object.assign(skuParams,sku)

    // 获取平台属性
    reqAttr(sku.category_id).then(res=>{
        attrArr.value = res.data.data
        // 显示已选择的平台属性
        attrArr.value.map(item=>{
            for(let i of skuParams.sku_category_attr){
                if(i.attrId==item.id){
                    item.attrIdAndValueId = `${i.attrId}:${i.index}:${i.attr_value}`
                }
            }
        })
    })
    // 获取销售属性
    reqHasSaleAttrValue(sku.spu_id).then(res=>{
        saleArr.value = res.data.data
        // 显示已选择的销售属性
        saleArr.value.map(item=>{
            for(let i of skuParams.sku_sale_attr){
                if(i.saleAttrId==item.sale_attr_id){
                    item.saleIdAndValueId = `${i.saleAttrId}:${i.saleAttrValue}`
                }
            }
        })

    })
    // 获取照片墙的数据
    reqSpuImageList(sku.spu_id).then(res=>{
        imgArr.value = res.data.data
        // 勾选已选择的默认图片
        for(let i of imgArr.value){
            if(i.id == skuParams.default_img.id){
                nextTick(()=>{
                    handler(i)
                })
            }
        }
    })

    // skuParams.sku_category_attr.forEach(item=>{
    //     console.log(item);
    // })
}


// 点击 设置默认 按钮触发事件
const handler = (row)=>{
    skuParams.default_img = {
        id:row.id,
        name:row.name,
        url:row.url
    }
    
    // 清空之前的选择方式1，推荐
    table.value.clearSelection()
    // 清空之前的选择方式2
    // imgArr.value.forEach(item=>{
    //     table.value.toggleRowSelection(item,false)
    // })

    table.value.toggleRowSelection(row)  // 选择当前行
}

// 点击保存按钮触发事件
const save =()=>{
    // 收集平台属性
    
    skuParams.sku_category_attr = attrArr.value.reduce((prev,next)=>{
        if(next.attrIdAndValueId){
            let [attrId,index,attr_value] = next.attrIdAndValueId.split(':')
            prev.push({
                attrId,
                index,
                attr_value
            })
        }
        return prev
    },[])

    // 收集销售属性
    skuParams.sku_sale_attr = saleArr.value && saleArr.value.reduce((prev,next)=>{
        if(next.saleIdAndValueId){
            let [saleAttrId,saleAttrValue] = next.saleIdAndValueId.split(':')
            prev.push({
                saleAttrId,
                saleAttrValue
            })
        }
        return prev

    },[])
    // return
    // 发送请求
    reqAddSku(skuParams).then(res=>{
        if(res.data.code==200){

            ElMessage({
                type:'success',
                message: skuParams.id?'修改成功':'添加成功'
            })
            // 切换场景
            $emit('changeScene',{flag:0,params:''})
        }else{
            ElMessage({
                type:'error',
                message:(skuParams.id ?'修改失败，':'添加失败，') + res.data.msg
            })
        }
    })

}


// 对外导出方法和变量，让其他组件能拿到
defineExpose({
    initSkuData,
    editSkuInitData,
})
</script>

<template>
    <el-form label-width="100px">
        <el-form-item label="SKU名称"> <el-input v-model="skuParams.name" palceholder="SKU名称"></el-input></el-form-item>
        <el-form-item label="价格(元)"> <el-input v-model="skuParams.price" palceholder="价格(元)"></el-input> </el-form-item>
        <el-form-item label="重量(克)"> <el-input type="number" v-model="skuParams.weight" palceholder="重量(克)"></el-input> </el-form-item>
        <el-form-item label="SKU描述"> <el-input type="textarea" v-model="skuParams.sku_desc" palceholder="SKU描述"></el-input> </el-form-item>
        
        <el-form-item label="平台属性">
            <el-form :inline="true">
                <el-form-item v-for="(item,index) in attrArr" :key="index" :label="item.name" label-width="100px" >
                    <el-select v-model="item.attrIdAndValueId">
                        <el-option v-for="(attrValue,index1) in item.value_list" :key="index1" 
                        :label="attrValue" :value="`${item.id}:${index1}:${attrValue}`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="销售属性">
            <el-form :inline="true">
                <el-form-item v-for="(item,index) in saleArr" :key="item.id" :label="item.sale_attr_name" >
                    <el-select v-model="item.saleIdAndValueId">
                        <el-option v-for="(saleAttrValue,index1) in item.attr_value_list" :key="saleAttrValue.sale_attr_id" :label="saleAttrValue.value"
                        :value="`${item.sale_attr_id}:${saleAttrValue.value}`"></el-option>
                    </el-select>
                </el-form-item>
                
            </el-form>
        </el-form-item>

        <el-form-item label="默认图片">
            <el-table border :data="imgArr" ref="table">
                <el-table-column type="selection" with="80px" align="center"></el-table-column>
                <el-table-column label="图片">
                    <template #="{row,$index}">
                        <img :src="row.url" alt="" style="width:100px;height:100px;" >
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="操作">
                    <template #="{row,$index}">
                        <el-tag v-if="row.id==skuParams.default_img.id" type="success"> <el-icon> <SuccessFilled /> </el-icon>当前默认图片</el-tag>
                        <el-button v-else type="primary" size="small" @click="handler(row)">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
        </el-form-item>

        
    </el-form>
</template>

<style scoped lang="scss">

</style>